<template>
  <input
    :type="type"
    :value="modelValue"
    @input="onInput"
    class="w-full h-full text-gray-800 leading-normal shadow-none px-1 my-2 mx-1 bg-transparent border-none outline-none focus:(outline-none ring-0)"
    autocomplete="new-password"
    autofocus
    required
  />
</template>
<script lang="ts" setup>
import { PropType } from "vue";
import { useDebounceFn } from "@vueuse/core";

type ZInputType = "text" | "number" | "password";

defineProps({
  type: {
    type: String as PropType<ZInputType>,
    default: "text",
  },
  modelValue: String,
});

const emit = defineEmits(["update:modelValue"]);

const onInput = useDebounceFn((e: Event) => {
  const value = (e.target as HTMLInputElement).value;
  emit("update:modelValue", value);
}, 200);
</script>
